$jetpack-product-card-circle-size: 65px;

.product-card-placeholder {
	@include placeholder( --color-neutral-10 );

	position: relative;

	display: block;

	min-width: 300px;
	min-height: 300px;
	margin: calc( 24px + #{$jetpack-product-card-circle-size/2} ) 0 24px;

	&::before {
		content: '';

		position: absolute;
		top: -$jetpack-product-card-circle-size/2;
		left: calc( 50% - #{$jetpack-product-card-circle-size/2} );

		display: block;
		box-sizing: border-box;
		width: $jetpack-product-card-circle-size;
		height: $jetpack-product-card-circle-size;

		background: inherit;
		border-radius: 50%;
	}

	@media ( min-width: 660px ) {
		border-radius: 5px;
	}
}
